<template>
  <div class="banxin box">
    <main>
      <p><i @click="$router.go(0)">商品分类 /</i> {{messge.seriesTitle}}</p>
      <div class="center">
        <div class="center_l">
          <img :src="'https://sc.wolfcode.cn'+ messge.imgAltas[imgIndex].src" alt="" />
          <div class="smallimg">
            <img v-for="(item,index) in messge.imgAltas" :key="index" :src="'https://sc.wolfcode.cn'+ item.src" @click="imgIndex = index" :class="{opct : imgIndex === index}" alt="" />
          </div>
        </div>
        <div class="center_r">
          <h3>{{messge.seriesTitle}}</h3>
          <div class="small">
            {{messge.seriesSubTitle}}
          </div>
          <h3 class="jifen">{{messge.coin}}积分</h3>
          <h6>选择颜色</h6>
          <div class="yangshi" v-for="(item,index) in messge.parameterJson" :key="index">
            <i :class="{active : keyi === i }" v-for="(items,i) in item.parameters" :key="i" @click="choseType(i,item.title)">{{items.title}}</i>
          </div>
          <h6>数量</h6>
          <span class="number">
            <div @click="goodsNumber === 0 ? goodsNumber = 0 : goodsNumber--">-</div>
            <div class="cen">{{goodsNumber}}</div>
            <div @click="goodsNumber++">+</div>
          </span>
          <div class="buy">
            <div class="green">加入购物车</div>
            <div class="red">立即购买</div>
          </div>
          <div class="likeimg">
            <img src="@/assets/images/details/like-click.png" alt="" />
            <span>喜欢7897</span> [图][图][图]
          </div>
        </div>
      </div>
      <div class="info">
        <p>
          <span @click="goods =1" :class="{active: goods === 1}">商品详情</span>
          <span @click="goods =2" :class="{active: goods === 2}">联系我们</span>
        </p>
        
      </div>
      <div class="introduce"  v-show="goods === 1">
        <div class="detalied_inf">
          <p>品牌名称：ZEMAY</p>
          <p>产品参数：</p>
          <p>产品名称：ZEMAY ZEMAY-3000</p>
          <p>品牌: ZEMAY</p>
          <p>型号: ZEMAY-3000</p>
          <p>材质: 316不锈钢</p>
          <p>容量: 201mL(含)-300mL(含)</p>
        </div>
        <div  v-html="messge.description">
          <!-- <img :src="'https://sc.wolfcode.cn' + messge.coverImg" alt=""> -->
        </div>
      </div>
      <div v-show="goods === 2" class="call_us">
        <h4>兑换后运费如何收取？</h4>
        <p>
          商城内大部分实物产品均可包邮，也支持上门自提。虚拟产品则无需运费，可在兑换后直接使用。
        </p>
        <p>
          （注：新疆，西藏，内蒙古，青海，海南，宁夏暂不支持包邮，在此地区兑换商品需提前与客服确认运费。）
        </p>
        <h4>如何申请退换货？</h4>
        <p>所有产品均为鸡腿兑换礼品，无质量问题不支持退换货；</p>
        <p>如因喜好不同，或到货后后悔等原因，不支持退货；</p>
        <p>
          因客户原因如联系方式有误、电话停机、不接电话、无理由拒收等造成快件无法正常签收的情况，叩丁狼均不进行补发或赔付；
        </p>
        <p>
          如因质量问题需要退货，将由客服人员与客户联系，确认邮寄地址与流程。退回物品不得有人为损坏或使用痕迹，否则拒绝退换；
        </p>
        <p>
          如顾客选择自行寄回商品，请先垫付运费，到货验证商品后，叩丁狼将以鸡腿发放形式为用户报销运费，不接受单方面到付件。
        </p>
        <h4>如何开具发票？</h4>
        <p>叩丁狼积分商城产品均为定制礼品，使用积分兑换的产品均不支持开票</p>
        <h4>关于鸡腿价格问题</h4>
        <p>
          因可能存在系统缓存、页面更新延迟等不确定性情况，导致价格显示异常，商品具体售价请以订单结算页价格为准。如您发现异常情况出现，请立即联系我们补正，以便您能顺兑换。
        </p>
        <p>联系我们 <a href="www.wolfcode.cn">www.wolfcode.cn</a> 微信公众号搜索“叩丁狼”</p>
      </div>
      
    </main>
    <div class="them">
        <h6>你还可以兑换</h6>
        <ul>
            <li v-for="(item,index) in themYouCanBuy" :key="index" @click="toOthers(item.id)">
                <div class="img">
                    <img :src=" 'https://sc.wolfcode.cn' + item.img " alt="">
                </div>
                <div class="val">
                    <i>
                        {{item.name}}
                    </i>
                    <div><span>{{item.coin}}</span>积分</div>
                </div>
            </li>
        </ul>
    </div>
  </div>
</template>

<script>
import bus from "@/common/bus";
// 详细信息请求接口
import { goodsMoreGoodsInfo } from "@/request/Api";
export default {
  data() {
    return {
      messge: {}, //主页面信息
      themYouCanBuy: [],  //侧边栏信息
      imgIndex : 0, //控制图片选择样式
      keyi : 0, //控制类型选择样式
      goods:1, //控制商品详情样式 下部
      // messge.icon 是购买需要的积分
      goodsNumber : 0 , //用户当前选中的商品的数量
      chose : '' //用户当前选中的物品类型 
      // 点击加入购物车的时候 就将数量 和 选中项目 传入购物车
    };
  },
  created() {
    //这个是没有id的时候的接口 如果有id  那么就不这么展示
     
          bus.$on("letInfoToGoods", (info) => {
            this.messge = info.productInfo;
            this.themYouCanBuy = info.themYouCanBuy;
            this.messge.description = info.productInfo.description.replace(
              /<img src="/g,
              '<img src="http://wolfcode.cn/'
            )
          });
      
      
  },
  methods :{
    choseType(i,val){
      this.keyi = i,
      this.chose = val
    },
    toOthers(id){
      // 单击发送请求 重新渲染
      // goodsMoreGoodsInfo({id}).then(res=>{
      //   console.log(res);
      // })
      goodsMoreGoodsInfo(id).then((e)=>{
        this.messge = e.data.data.productInfo;
        this.themYouCanBuy = e.data.data.themYouCanBuy;
        this.messge.description = e.data.data.productInfo.description.replace(
            /<img src="/g,
            '<img src="http://wolfcode.cn/'
          )
      })
    }
  }
};
</script>
 
<style lang = "less" scoped>
@import "@/assets/base.less";
.box {
    position: relative;
  main {
    width: 900px;
    p {
      margin-top: 20px;
      margin-bottom: 10px;
      color: #333;
      font-size: 16px;
      i {
        cursor: pointer;
        color: #999;
      }
    }
    .center {
      display: flex;
      justify-content: space-between;
      .center_l {
        img {
          width: 459px;
          height: 440px;
        }
        .smallimg {
          margin-top: 20px;
          display: flex;
          width: 459px;
          height: 100px;
          justify-content: space-between;
          img {
            width: 100px;
            height: 100px;
            opacity: 0.5;
            &.opct {
              opacity: 1;
            }
          }
        }
      }
      .center_r {
        border-right: 1px solid #ececec;
        padding-left: 40px;
        h3 {
          font-size: 28px;
          margin: 5px 0;
        }
        .small {
          font-size: 14px;
          line-height: 20px;
          color: #999999;
          margin: 10px 0;
        }
        .jifen {
          color: #fd604d;
          margin: 20px 0;
        }
        h6 {
          margin: 20px 0;
        }
        .yangshi {
          width: 430px;
          display: flex;
          flex-wrap: wrap;
          justify-content: start;
          i {
            &.active {
              color: @blue;
              border: 1px solid @blue;
            }
            cursor: pointer;
            margin: 10px 20px 10px 0;
            color: #999;
            font-size: 14px;
            padding: 8px;
            display: block;
            border: 1px solid #999;
          }
          margin-bottom: 10px;
        }
        .number {
          display: flex;
          .cen {
            cursor: no-drop;
            width: 46px;
            border-left: none;
            border-right: none;
          }
          div {
            cursor: pointer;
            text-align: center;
            line-height: 32px;
            color: #999;
            width: 30px;
            height: 32px;
            border: 1px solid #999;
          }
          margin-bottom: 30px;
        }
        .buy {
          display: flex;
          div {
            cursor: pointer;
            line-height: 46px;
            text-align: center;
            width: 150px;
            height: 46px;
            margin-right: 25px;
            color: white;
          }
          .green {
            background-color: #3dc36b;
          }
          .red {
            background-color: #fd604d;
          }
        }
        .likeimg {
          display: flex;
          color: #999;
          margin-top: 20px;
          align-items: center;
          span {
            font-size: 16px;
            margin: 0 10px;
          }
        }
      }
    }
    .info {
      margin-top: 60px;
      p {
        span {
          cursor: pointer;
          font-size: 18px;
          display: inline-block;
          width: 120px;
          height: 50px;
          text-align: center;
          line-height: 50px;
          font-weight: bold;
          background-color: #ececec;
          &.active {
            color : white;
            background-color: @blue;
          }
        }
      }
      
    }
    .introduce {
      div {
        margin-top: 50px;
        width: 790px;
      }
      .detalied_inf {
        p {
          color: #666;
          font-size: 14px;
        }
      }
    }
    .call_us {
      h4 {
        margin: 30px 0;
        font-weight: bold;
      }
    }
  }
  .them {
    position: absolute;
    top: 30px;
    width: 259px;
    right: 0;
    li {
        margin: 20px 0;
        display: flex;
        .img {
            width: 80px;
            height: 60px;
            background-color: coral;
            img {
              width: 100%;
              height: 100%;
            }
        }
        .val {
            margin-left: 10px;
            i {
                display: block;
                color: #0A328E;
            }
            div {
                display: block;
                margin-top: 15px;
                font-size: 18px;
                span {
                    color: #FF5E0F;
                }
            }
        }
    }
  }

  
}
</style>